<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="home/layout::html-head(pageTitle='用户登录',pageKey=${pageKey},pageDesc=${pageDesc})" />
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
    <body class="layout-top-nav skin-black-light">
        <div class="wrapper">
            <header class="main-header" th:include="home/layout::main-header">
            </header>
            <!-- Full Width Column -->
            <div class="content-wrapper">
                <div class="container">
                    <!-- Main content -->
                    <section class="content">
                        <div class="row" >
                            <div class="col-md-4 col-md-offset-4 floating-box">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">请登录</h3>
                                    </div>
                                    <div class="panel-body" id="app-user-login">

                                        <form method="POST" accept-charset="UTF-8">
                                            <div class="form-group ">
                                                <label class="control-label">邮 箱</label>
                                                <input class="form-control" v-model="form.field.email" @blur="checkEmailExist()" type="text" placeholder="请填写邮箱">
                                                <template v-if="form.error.email"><span class="text-danger" >{{form.error.email}}</span></template>
                                            </div>

                                            <div class="form-group ">
                                                <label class="control-label">密 码</label>
                                                <input class="form-control" v-model="form.field.password" type="password" placeholder="请填写密码">
                                                <template v-if="form.error.password"><span class="text-danger" >{{form.error.password}}</span></template>
                                            </div>

                                            <div class="form-group ">
                                                <label class="control-label">记住我</label>
                                                <input v-model="form.field.rememberMe" type="checkbox">
                                            </div>

                                            <button type="button" @click="submitForm" class="btn btn-lg btn-success btn-block">
                                                <i class="fa fa-btn fa-sign-in"></i> 登录
                                            </button>
                                        </form>
                                        <div align="center">
                                            <a class="no-pjax" th:href="@{/auth/loginUseCode}" style="color: #717573;font-size: 13px;">忘记密码？</a>|
                                            <a class="no-pjax" th:href="@{/auth/register}" style="color: #717573;font-size: 13px;">注册新账号</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- /.content -->
                </div>
                <!-- /.container -->
            </div>
            <!-- /.content-wrapper -->
            <footer class="main-footer" th:include="home/layout::main-footer" />
        </div>
        <!-- ./wrapper -->
        <th:block th:include="home/layout::main-script" />
        <script>
            new Vue({
                el:"#app-user-login",
                data() {
                    return {
                        form:{
                            field:{
                                email:'',
                                password:'',
                                rememberMe:'',
                                code:''
                            },
                            error:{
                                email:'',
                                password:''
                            }
                        },
                        countDown:60
                    }
                },
                methods:{
                    submitForm() {
                        var _this = this;
                        if (!this.form.field.email) {
                            this.form.error.email = '请填写邮箱';
                            return false;
                        } else {
                            this.form.error.email = '';
                        }
                        if (!util.validation.checkEmail(this.form.field.email)) {
                            this.form.error.email = '邮箱格式不正确';
                            return false;
                        } else {
                            this.form.error.email = '';
                        }
                        if (!this.form.field.password) {
                            this.form.error.password = '请填写密码';
                            return false;
                        } else {
                            this.form.error.password = '';
                        }
                        $.post("/auth/login",this.form.field,function (response) {
                            if (response.status === true) {
                                window.location = "/";
                            }
                            if (response.passwordError === true) {
                                _this.form.error.password = response.msg;
                                return false;
                            }else {
                                _this.form.error.password = '';
                            }

                            if (response.emailError === true) {
                                _this.form.error.email = response.msg;
                                return false;
                            }else {
                                _this.form.error.email = '';
                            }
                        },'json',_this);
                    },
                    checkEmailExist() {
                        var _this = this
                        $.post('/auth/checkEmailExist',{email:this.form.field.email},function(response) {
                            if (response.exist == false) {
                                _this.form.error.email = '该邮箱不存在';
                            }
                            else {
                                _this.form.error.email = '';
                            }
                        },'json',_this);
                    },
                }
            });
        </script>
    </body>
</html>
